<!-- 交易情况 -->
<template>
	<view>
		<uv-cell-group>
			<uv-cell icon="integral-fill" title="交易情况" value="平均单价"></uv-cell>
			<uv-cell icon="integral-fill" title="一月" value="80"></uv-cell>
			<uv-cell icon="integral-fill" title="二月" value="90"></uv-cell>
			<uv-cell icon="integral-fill" title="三月" value="70"></uv-cell>
			<template v-if="isExpand">
				<uv-cell icon="integral-fill" title="四月" value="60"></uv-cell>
				<uv-cell icon="integral-fill" title="五月" value="75"></uv-cell>

				<uv-cell icon="integral-fill" title="六月" value="85"></uv-cell>
				<uv-cell icon="integral-fill" title="七月" value="95"></uv-cell>
				<uv-cell icon="integral-fill" title="八月" value="80"></uv-cell>
				<uv-cell icon="integral-fill" title="九月" value="65"></uv-cell>
				<uv-cell icon="integral-fill" title="十月" value="90"></uv-cell>
				<uv-cell icon="integral-fill" title="十一月" value="70"></uv-cell>
				<uv-cell icon="integral-fill" title="十二月" value="60"></uv-cell>
				<uv-cell icon="integral-fill" title="合计" value="60%"></uv-cell>
			</template>
			<uv-cell>
				<template v-slot:value>
					<text @click="handleExpand">{{isExpand? '收起' : '展开'}}</text>
				</template>
				<template v-slot:right-icon>
					<uv-icon size="30rpx" :name="expandIcon"></uv-icon>
				</template>
			</uv-cell>
		</uv-cell-group>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	const isExpand = ref(false)

	const handleExpand = () => {

		isExpand.value = !isExpand.value
		console.log("点击展开了", isExpand.value)
	}
	const expandIcon = computed(() => {
		return isExpand.value ? 'arrow-up' : 'arrow-down';
	})
</script>

<style>
</style>